@use "../../../../../../../../../tokens";

.contentWrapper {
  max-width: tokens.$content-md;
  margin: 0 auto;
  text-align: center;
  display: flex;
  align-items: center;
  gap: tokens.$spacing-xl;
  @media screen and (max-width: tokens.$screen-xl) {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.buttonsWrapper {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: tokens.$spacing-md;

  a {
    display: block;
  }

  @media screen and (min-width: tokens.$screen-sm) {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}

.content {
  text-align: left;
  max-width: tokens.$content-sm;
  margin: 0 auto;

  h3 {
    font: tokens.$text-title-2xs;
  }

  p,
  h3 {
    margin-block-end: tokens.$spacing-md;
    text-align: left;
  }

  > a {
    color: tokens.$color-blue-60;
    display: inline-block;
    margin-inline-start: tokens.$spacing-sm;
  }
}

.chart {
  vertical-align: text-bottom;
}

.illustrationWrapper {
  align-items: center;

  &.hideOnMobile {
    display: none;

    @media screen and (min-width: tokens.$screen-xl) {
      display: flex;
    }
  }

  img {
    width: 100%;
  }
}
